<template>
	<view class="curr_content">
		<view class="top_nav">
			<view class="left" @click="back()">
				<image src="../../static/img/arrow-left.png" mode=""></image>
				<p>我的简历</p>
			</view>
			<button class="right" type="default" @click="toEdit()">提交审核</button>
		</view>
		<view class="footer">
			<view class="box">
				<view class="left"><image src="../../static/img/pic.jpg" mode=""></image></view>
				<view class="right">
					<view class="name">赵凯</view>
					<view class="phone">13565999999</view>
					<view class="type">中国 · 汉族 · 群众</view>
					<view class="age">1987-07-19 · 33岁 · 未婚</view>
				</view>
			</view>
			<!-- 基本信息 -->
			<view class="i_title">基本信息</view>
			<view class="base_info">
				<view class="i_item">
					<view class="item">
						<text class="t_title">员工工号</text>
						<text class="t_content">123123</text>
					</view>
					<view class="item">
						<text class="t_title">员工类型</text>
						<text class="t_content">正式员工</text>
					</view>
					<view class="item">
						<text class="t_title">工作单位</text>
						<text class="t_content">特变电工股份有限公司</text>
					</view>
					<view class="item">
						<text class="t_title">工作部门</text>
						<text class="t_content">人力资源部</text>
					</view>
					<view class="item">
						<text class="t_title">岗位</text>
						<text class="t_content">软件开发岗</text>
					</view>
					<view class="item">
						<text class="t_title">进入特变日期</text>
						<text class="t_content">2020-07-07</text>
					</view>
					<view class="item">
						<text class="t_title">入司日期</text>
						<text class="t_content">2020-07-07</text>
					</view>
					<view class="item" @click="showRightPop()">
						<text class="t_title">国籍</text>
						<text class="t_content">中国</text>
						<image src="../../static/img/back.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 教育信息 -->
			<view class="i_title">教育信息</view>
			<view class="educat_info">
				<view class="i_item list" v-for="item in educatInfoList" :key="item.num">
					<view class="item">
						<text class="t_title">序号</text>
						<text class="t_content">{{item.num}}</text>
	
							<view @tap="taptext($event,4)"><image src="../../static/img/ellipsis-vertical.png"  mode=""></image></view>
						
					</view>
					<view class="item">
						<text class="t_title">院校</text>
						<text class="t_content">{{item.school}}</text>
					</view>
					<view class="item">
						<text class="t_title">入学日期</text>
						<text class="t_content">{{item.in_date}}</text>
					</view>
					<view class="item">
						<text class="t_title">毕业日期</text>
						<text class="t_content">{{item.out_date}}</text>
					</view>
					<view class="item">
						<text class="t_title">学历</text>
						<text class="t_content">{{item.edu_bg}}</text>
					</view>
					<view class="item">
						<text class="t_title">专业</text>
						<text class="t_content">{{item.major}}</text>
					</view>
				</view>
				<!-- <view class="i_item list">
					<view class="item">
						<text class="t_title">序号</text>
						<text class="t_content">2</text>
						<text @tap="taptext($event,4)"><image src="../../static/img/ellipsis-vertical.png"  mode=""></text>
					</view>
					<view class="item">
						<text class="t_title">院校</text>
						<text class="t_content">华东理工大学</text>
					</view>
					<view class="item">
						<text class="t_title">入学日期</text>
						<text class="t_content">2020-07-07</text>
					</view>
					<view class="item">
						<text class="t_title">毕业日期</text>
						<text class="t_content">2020-07-07</text>
					</view>
					<view class="item">
						<text class="t_title">学历</text>
						<text class="t_content">本科</text>
					</view>
					<view class="item">
						<text class="t_title">专业</text>
						<text class="t_content">软件工程</text>
					</view>
				</view> -->
				<!-- 新增 -->
				<button class="btn" type="default" @click="addEduInfo()">新增教育信息</button>
			</view>
		</view>
		<!-- 选择国籍 -->
		<popup-layer ref="popupRef" :direction="'left'">
			<view class="right_pop">
				<view class="top_title">国籍选择</view>
				<view class="search"><uni-search-bar :radius="100" @input="searchCountry"></uni-search-bar></view>
				<!-- 国籍选择列表 -->
				<!-- <view class="radio_list">
					<evan-radio-group v-model="color">
						<evan-radio ﻿v-for="item in colorList" :key="item.value" :label="item.value">{{ item.label }}</evan-radio>
					</evan-radio-group>
				</view> -->
				<view class="radio_list">
					<evan-radio-group v-model="country">
						<evan-radio class="list-item" ﻿v-for="(item,index) in countryList" :key="index" :label="item.value">{{ item.country }}</evan-radio>
					</evan-radio-group>
				</view>
				<!-- 分页 -->
				<view class="pagination"><uni-pagination show-icon="true" :total="pagination.total" :current="pagination.current" @change="changePage()"></uni-pagination></view>
				<!-- 按钮组 -->
				<!-- <view class="btns">
					<view class="" style="width: 70%;height: 100%;display: flex;float: right;">
						<button class="cancle_btn" type="default" @click="closeLeftPop()">取消</button>
						<button class="sure_btn" type="default">确定</button>
					</view>
				</view> -->
			</view>
		</popup-layer>
		<!-- 教育信息操作弹出层 -->
		<chunLei-popups v-model="value4" :popData="data2" @tapPopup="tapPopup" :x="x" :y="y" placement="top-end" dynamic style="font-size: 28rpx;" :triangle="true"></chunLei-popups>
		<!-- 新增教育信息弹窗 -->
		<uni-popup ref="popup" type="bottom">
		    <view class="pop">
				<view class="line">
				   <view class="line-l">序号</view>
				   <view class="line-r"><input type="text" value="111" focus/></view>
				</view>
				<view class="line">
				   <view class="line-l">院校</view>
				   <view class="line-r"><input type="text" value="华东理工大学" focus/></view>
				</view>
				<view class="line">
					<view class="line-l">入学日期</view>
					<view class="line-r"><dyDatePicker @getData="getData"  placeholder="请选择日期"  ></dyDatePicker></view>
				</view>
				<view class="line">
					<view class="line-l">毕业日期</view>
					<view class="line-r"><dyDatePicker @getData="getData"  placeholder="请选择日期"></dyDatePicker></view>
				</view>
			  <!-- </view> -->
				<view class="line">
					<view class="line-l">学历</view>
					<view class="line-r"><input type="text" value="本科" focus/></view>
				</view>
				<view class="line">
					<view class="line-l">专业</view>
					<view class="line-r"><input type="text" value="软件工程" focus/></view>
				</view>
		
				<view class="but">
				   <view class="bt1" @click="cancel()">取消</view>
				   <view class="bt2" @click="submit()">新增</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
// 弹出层
import popupLayer from '../../components/popup-layer.vue';
// 搜索框
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
// 分页器
import uniPagination from '@/components/uni-pagination/uni-pagination.vue';
// 单选框组
import radioGroup from '@/components/evan-radio-group/evan-radio-group.vue';
// 教育信息操作弹出层
import chunLeiPopups from "@/components/chunLei-popups/chunLei-popups.vue";
// 新增教育信息弹窗
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue'
import dyDatePicker from '@/components/dy-Date/dy-Date.vue'
export default {
	components: {
		popupLayer,
		uniSearchBar,
		uniPagination,
		radioGroup,
		chunLeiPopups,
		uniPopupMessage,
		uniPopupDialog,
		uniPopupShare,
		dyDatePicker
	},
	data() {
		return {
			pagination: {
				current: 6,
				total: 8
			},
			// color: 'red',
			// colorList: [
			// 	{
			// 		label: '红色',
			// 		value: 'red'
			// 	},
			// 	{
			// 		label: '绿色',
			// 		value: 'green'
			// 	},
			// 	{
			// 		label: '蓝色',
			// 		value: 'blue'
			// 	},
			// 	{
			// 		label: '粉色',
			// 		value: 'pink'
			// 	},
			// 	{
			// 		label: '黑色',
			// 		value: 'black'
			// 	}
			// ],
			country:'zg',
			countryList:[
				{country:'中国',value:'zg'},
				{country:'不丹',value:'bd'},
				{country:'东帝汶',value:'ddw'},
				{country:'中非共和国',value:'zf'},
				{country:'丹麦',value:'dm'},
				{country:'乌拉圭',value:'wlg'},
				{country:'也门',value:'ym'},
				{country:'以色列',value:'ysl'},
				{country:'伊拉克',value:'ylk'},
				{country:'亚美尼亚',value:'ymny'},
				{country:'乌兹别克斯坦',value:'wzbkst'},
			],
			value4:false,
			x:0,
			y:0,
			data2:[{title:'删除'},{title:'上移',disabled:true},{title:'下移'}],
			educatInfoList:[
				{
					num:1,
					school:'华东理工大学',
					in_date:'2020-07-07',
					out_date:'2020-07-07',
					edu_bg:'本科',
					major:'专业'
				},
				{
					num:2,
					school:'华东理工大学',
					in_date:'2020-07-07',
					out_date:'2020-07-07',
					edu_bg:'本科',
					major:'专业'
				}
			]
		};
	},
	//监听滚动隐藏
	onPageScroll(){
		for (let i = 0; i < 6; i++) {
			this[`value${i}`] = false
		}
	},
	methods: {
		// 返回上一页
		back() {
			uni.navigateBack({ delta: 1 });
		},
		// 跳转至查看状态
		toEdit() {
			uni.navigateTo({
				url: 'index'
			});
		},
		// 选择国籍
		// 显示右侧弹出层
		showRightPop() {
			this.$refs.popupRef.show();
		},
		// 显示右侧弹出层
		closeRightPop() {
			this.$refs.popupRef.close();
		},
		// 操作教育信息
		doEdit(id) {
			console.log(id);
		},
		// 新增教育信息
		addEduInfo() {
			console.log('新增教育信息');
			this.$refs.popup.open()
		},
		cancel(){
		    this.$refs.popup.close()
		},
		submit(){
		    this.$refs.popup.close()
		},
		getData() {
		    console.log('选择时间')
		},
		// 搜索国家
		searchCountry(value) {
			console.log(value);
		},
		// 分页
		changePage() {
			console.log('fenye');
		},
		// 教育信息操作弹出层
		tapPopup(e){
		   console.log(e)
		   uni.showToast({
		    title:e.title,
		    icon:'none'
		   })
		  },
		  taptext(e,index){
		  	this.x = e.touches[0].clientX
		  	this.y = e.touches[0].clientY
		  	console.log(this.x)
			console.log(this.y)
		  	this[`value${index}`] = !this[`value${index}`]
		  },
	}
};
</script>
<style lang="less">
.i_title {
	font-size: 30rpx;
	color: #101010;
	font-weight: 600;
	padding: 0rpx 20rpx 20rpx;
	box-sizing: border-box;
}
// 搜索框样式
/deep/ .uni-searchbar__box[data-v-37e74394] {
	height: 60rpx;
	background-color: #fff !important;
	border-color: #bbb;
}
/deep/ .uni-searchbar__box-icon-search[data-v-37e74394] {
	color: #bbb !important;
}
/deep/ .uni-searchbar__text-placeholder[data-v-37e74394] {
	font-size: 24rpx;
	color: #bbb;
}
/deep/ .uni-searchbar__box-search-input[data-v-37e74394] {
	font-size: 24rpx;
	color: #bbb;
}
/deep/ .uni-searchbar__cancel[data-v-37e74394] {
	color: #101010;
}
/deep/ .uni-searchbar__box-icon-clear[data-v-37e74394] .uni-icons[data-v-6d2a47b0] {
	color: #bbb !important;
	font-size: 44rpx !important;
}
// 按钮边框
uni-button:after {
	border: 0 none;
}
// 分页器样式
/deep/ .uni-pagination[data-v-8b28f3d8] {
	width: 100%;
}
/deep/ .uni-pagination__btn[data-v-8b28f3d8] {
	width: 40rpx;
	height: 40rpx;
	background-color: #fff;
}
/deep/ .uni-pagination__num[data-v-8b28f3d8] {
	position: absolute;
	left: 20%;
	top: -20%;
}
/deep/ .uni-icons[data-v-6d2a47b0] {
	// color: #101010 !important;
	font-size: 30rpx !important;
}
// 单选框圆圈
// /deep/ .evan-radio__inner--round[data-v-7a9043f4] {
//     display: none;
// }
.evan-radio__inner--round[data-v-7a9043f4] {
    width: 32rpx !important;
    height: 32rpx !important;
}
// 单选框样式
/deep/ .evan-radio__label[data-v-7a9043f4] {
    font-size: 24rpx;
    // margin-left: 16rpx;
    color: #101010;
}
.curr_content {
	width: 100%;
	height: 100%;
	.top_nav {
		width: 100%;
		height: 100rpx;
		background-color: #007aff;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		position: relative;
		.left {
			display: flex;
			image {
				width: 58rpx;
				height: 58rpx;
			}
			p {
				color: #fff;
				font-size: 32rpx;
				margin: 7rpx 0 0 10rpx;
			}
		}
		.right {
			width: 160rpx;
			height: 60rpx;
			line-height: 60rpx;
			color: #101010;
			font-size: 26rpx;
			position: absolute;
			top: 20rpx;
			right: 50rpx;
		}
	}
	.footer {
		width: 100%;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		.box {
			width: 100%;
			display: flex;
			height: 250rpx;
			background: #fff;
			.left {
				width: 35%;
				height: 250rpx;
				image {
					width: 100%;
					height: 200rpx;
				}
			}
			.right {
				width: 65%;
				height: 250rpx;
				.name {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 34rpx;
					color: #101010;
				}
				.phone {
					width: 100%;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 26rpx;
					margin-bottom: 15rpx;
					color: #686868;
				}
				.type {
					width: 100%;
					height: 45rpx;
					line-height: 45rpx;
					font-size: 26rpx;
					color: #686868;
				}
				.age {
					width: 100%;
					height: 45rpx;
					line-height: 45rpx;
					font-size: 26rpx;
					color: #686868;
				}
			}
		}
		.base_info,
		.educat_info {
			border-bottom: 2rpx solid #eaeaea;
			padding-bottom: 20rpx;
			margin-bottom: 50rpx;
			box-sizing: border-box;
			.list {
				margin-top: 15rpx;
			}
			.list:first-child {
				margin-top: 0rpx;
			}
			.i_item {
				width: 100%;
				background-color: #fff;
				padding: 0 20rpx 20rpx;
				box-sizing: border-box;
				text {
					font-size: 26rpx;
				}
				.item {
					width: 100%;
					display: flex;
					justify-content: flex-start;
					line-height: 2.3;
					position: relative;
					.t_title {
						width: 35%;
						color: #101010;
					}
					.t_content {
						flex: 1;
						color: #959595;
					}
					image {
						width: 44rpx;
						height: 44rpx;
						position: absolute;
						top: 10rpx;
						right: 0rpx;
					}
				}
			}
			.btn {
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 28rpx;
				color: #101010;
				background-color: #fff;
				border: 2rpx solid #bbb;
				margin: 10rpx 0;
				box-sizing: border-box;
			}
		}
	}
	// 右侧弹出层
	.right_pop {
		padding: 30rpx;
		box-sizing: border-box;
		.top_title {
			width: 100%;
			height: 44rpx;
			line-height: 54rpx;
			position: relative;
			font-size: 30rpx;
			color: #101010;
			padding-left: 30rpx;
			box-sizing: border-box;
			&::before {
				content: '';
				display: block;
				width: 14rpx;
				height: 44rpx;
				border-radius: 8rpx;
				transform: translateY(-50%);
				background-color: #007aff;

				position: absolute;
				left: 0;
				top: 50%;
			}
		}
		.search {
			width: 100%;
			height: 30rpx;
			margin-top: 20rpx;
		}
		.radio_list {
			width: 100%;
			height: 100%;
			line-height: 2.5;
			margin-top: 80rpx;
			border: 2rpx solid #e0e0e0;
			box-sizing: border-box;
			.list-item {
				padding: 10rpx 30rpx;
				border-bottom: 1rpx solid #e0e0e0; 
				box-sizing: border-box;
			}
			.list-item:last-child {
				border-bottom: 0 none; 
			}
		}
		.pagination {
			width: 30%;
			height: 80rpx;
			position: fixed;
			bottom: 100rpx;
			right: 60rpx;
		}
		.btns {
			width: 100%;
			height: 60rpx;
			position: fixed;
			bottom: 120rpx;
			right: 30rpx;
			.cancle_btn {
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #e8e8e8;
				color: #919191;
				border-radius: 28rpx;
				font-size: 30rpx;
			}
			.sure_btn {
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #007aff;
				color: #fff;
				border-radius: 28rpx;
				font-size: 30rpx;
			}
		}
	}
}
// 新增教育信息弹窗样式
.pop{
  width: 100%;
  // height: 50rpx;
  background-color: #fff;
  padding: 30rpx 30rpx;
  border-radius: 10rpx;
  box-sizing: border-box;
  margin: 0 auto;
  font-size: 26rpx;
  line-height: 50rpx;
  .line{
   width: 100%;
   height: 50rpx;
   padding: 30rpx 25rpx;
   box-sizing: border-box;
   display: flex;
   flex-wrap: nowrap;
   margin-bottom: 20rpx;
   .line-l{
    width: 35%;
    height: 50rpx;
    font-size: 26rpx;
    color: #101010;
   }
   .line-r{
    flex: 1;
    height: 50rpx;
	font-size: 26rpx;
    line-height: 50rpx; 
	color: #959595;
   }
   
  }
  .but{
   width: 55%;
   height: 80rpx;
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-around;
   margin: 80rpx auto  20rpx;
   
   .bt1{
    width: 140rpx;
    height: 66rpx;
    background: #eee;
    text-align: center;
    line-height: 66rpx;
    // border: 1rpx solid #bababa;
    border-radius: 15rpx;
    font-size: 30rpx;
	color: #101010;
   }
   .bt2{
    width: 140rpx;
    height: 66rpx;
    background:#007AFF;
    text-align: center;
    line-height: 66rpx;
    // border: 1rpx solid #007AFF;
    border-radius: 15rpx;
    color: #fff;
    font-size: 30rpx;
   }
  }
  }
  /deep/ .uni-input-input {
      font-size: 26rpx !important;
}
 /deep/ .placeholder[data-v-d3a8b87c] {
	 font-size: 26rpx;
	 color: #959595;
 }
</style>
